<template>
  <!-- 404 -->

  <div class="box">
    <div class="nofind">
      <h2>404</h2>
      <p class="font-size-h3 font-weight-light">OOPS! Something went wrong here</p>
      <p class="font-size-h3 font-weight-light">
        <a href="/home" class="nuxt-link-active">返回首页</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.NraTj7uyvmpJLwVoTgS4GwHaD7?w=292&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7')
    no-repeat;
  background-size: 100% 100%;
}
.nofind {
  display: flex;
  flex-direction: column;
  color: #3f4254;
  padding: 0 30px;
}
h2 {
  font-weight: 700;
  color: #cbe;
  line-height: 1.2;
  font-size: 150px;
  margin-top: 3.75rem !important;
  font-family: Poppins, Helvetica, 'sans-serif';
}
p {
  font-size: 0.5rem !important;
  font-weight: 300 !important;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #cbe;
}
a {
  color: #cbe;
}
</style>